// 入口文件
import Vue from 'vue'
// 导入路由
import VueRouter from 'vue-router'
// 安装路由模块
Vue.use(VueRouter)
// 导入App根组件
import app from "./App.vue";
// 新版本还需自己另外导入'mint-ui/lib/style.css'
import 'mint-ui/lib/style.css';
// 按需导入mint-ui
// import { Header,Swipe, SwipeItem,Button,Lazyload } from 'mint-ui';
// Vue.component(Header.name, Header)
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// Vue.use(Lazyload);


// 注册vuex
import Vuex from 'vuex'
Vue.use(Vuex)
// 每次当进入网站，肯定会调用main.js 在刚调用的时候，先从本地存储中，把购物车的数据读出来，放到store中
var car=JSON.parse(localStorage.getItem('car') || '[]')
var store=new Vuex.Store({
    state:{
        // this.$store.state.**
        car //将购物车商品的数据，用一个数组存储起来，在car数组中存储一些商品的对象，可设计成
        // {id:商品的id,count:购买的数量,price:价格，selected:true/false}
    },
    mutations:{
        // this.$store.commit('','')
        addToCar(state,goodsinfo){
            // 点击加入购物车，把商品信息保存到store中的car中
            // 分析:
            // 1.如果购物车中,之前已经有这个对应的商品了,那么只用更新数据即可
            // 2.如果没有,则直接把商品数据push到car中
            var flag=false;
            state.car.some(item=>{
                if(item.id==goodsinfo.id){
                    item.count+=parseInt(goodsinfo.count);
                    flag=true;
                    return true;
                }
            })
            // 如果循环完毕得到的flag还是false，则把商品数据直接push到购物车中
            if(flag===false){
                state.car.push(goodsinfo)
            }
            // 当更新car之后，把car数组保存到loacalstorage中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateGoodsInfo(state,goodsinfo){
            // 修改购物车中商品的数量值
            state.car.some(item=>{
                if(item.id==goodsinfo.id){
                    item.count=parseInt(goodsinfo.count);
                    return true;
                }
            })
             // 当更新car之后，把car数组保存到loacalstorage中
             localStorage.setItem('car',JSON.stringify(state.car))
        },
        remove(state,id){
            // 定义删除
            state.car.some((item,i)=>{
                if(item.id==id){
                    state.car.splice(i,1)
                    return true;
                }
            })
            // 当更新car之后，把car数组保存到loacalstorage中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateGoodsSelected(state,info){
            state.car.some(item=>{
                if(item.id==info.id){
                    item.selected=info.selected;
                    return true;
                }
            })
            // 当更新car之后，把car数组保存到loacalstorage中
            localStorage.setItem('car',JSON.stringify(state.car))
        }
    },
    getters:{
        // this.$store.getters.***
        // 相当于计算属性，也相当于filter
        getAllCount(state){
            var c=0;
            state.car.forEach(item=>{
                c+=item.count;
            })
            return c;
        },
        getGoodsCount(state){
            var o={};
            state.car.forEach(item=>{
                // 用id作为属性，count作为id的属性值
                o[item.id]=item.count;
            })
            return o;
        },
        getGoodsSelected(state){
            var o={};
            state.car.forEach(item=>{
                o[item.id]=item.selected;
            })
            return o;
        },
        getGoodsCountAndAmount(state){
            // 获取选中数量和总价
            var o={
                count:0, //勾选的数量
                amount:0 //勾选的总价
            };
            state.car.forEach(item=>{
                if(item.selected==true){
                    o.count+=item.count;
                    o.amount+=item.price*item.count;
                }
            })
            return o;
        }
    }
})


// 导入所有组件
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

// 导入并且注册预览插件vue-preview
import VuePreview from 'vue2-preview'
Vue.use(VuePreview)
// 导入MUI的样式
import './lib/mui/css/mui.min.css'
// 导入MU中图标
import './lib/mui/css/icons-extra.css'
// 导入vue-resource
import VueResource from "vue-resource"
// 安装vue-resource
Vue.use(VueResource)
// 设置请求的根路径
Vue.http.options.root="http://www.liulongbin.top:3005"
// 全局设置默认表单数据的格式
Vue.http.options.emulateJSON=true;
// 导入时间格式化的插件
import moment from 'moment'
// 定义全局过滤器
Vue.filter('dateFormat',function(datastr,pattern="YYYY-MM-DD"){
    return moment(datastr).format(pattern)
})

// 导入自己的router.js路由模块
import router from './router.js'

var vm=new Vue({
    el:"#app",
    render:c=>c(app),
    router, //挂载路由对象
    store  //挂载store状态管理对象
})